<template>
	<view class="business-mine">
		<!-- 头部 -->
		<view class="mine-hand">
			<view class="nav">我的</view>
			<view class="hand-info">
				<!-- 头像 -->
				<view class="hand-portrait">
					<image :src="busin.avatarUrl"></image>
				</view>
				<!-- 昵称和设置按钮 -->
				<view class="hand-name-set">
					<view class="hand-nickname">{{busin.busiName}}</view>
					<view class="hand-setting">{{busin.statusId == 1 ? '正常营业' : '账号异常'}}</view>
				</view>
				<!-- 右上角图标按钮 -->
				<view class="top-icon">
					<view style="margin-right: 20rpx;" @tap="navTo('../home/money-manage/money-manage')">
						<u-icon name="rmb-circle" color="#fff" size="46"></u-icon>
					</view>
					<view @tap="navTo('./setting/setting')">
						<u-icon name="setting" color="#fff" size="46"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<view class="mine-body">
			<!-- 我的消息 -->
			<view class="body-subkey news">
				<view class="subkey-title">
					<u-icon name="email-fill" color="#2ba4f7" size="60" class="title-icon"></u-icon>
					<text>我的消息</text>
				</view>
				<view class="subkey-menu">
					<view class="item" @tap="navTo('./email/email')">
						<view class="left">
							消息中心
						</view>
						<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
					</view>
					<view class="item" @tap="navTo('./help/help')">
						<view class="left">
							客服服务
						</view>
						<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
					</view>
				</view>
			</view>
			<!-- 我的服务 -->
			<view class="body-subkey serve">
				<view class="subkey-title">
					<u-icon name="server-man" color="#2ba4f7" size="60" class="title-icon"></u-icon>
					<text>我的服务</text>
				</view>
				<!-- 我的服务列表 -->
				<view class="subkey-menu">
					<view class="item" @tap="navTo('../home/money-manage/money-manage')">
						<view class="left">
							余额管理
						</view>
						<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
					</view>
					<view class="item" @tap="navTo('./setting/setting')">
						<view class="left">
							账户设置
						</view>
						<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				busin:this.$store.state.userInfo,
			};
		},
		methods:{
			//跳转拦截
			navTo(url){
				if (this.busin) return uni.navigateTo({url});
				uni.showToast({ title: '您还没登录，请先登录！',icon:'none'});
				setTimeout(()=>{
					this.$u.route({url:'../auth/btnAuth/wechatAuth',type:'redirect'})
				},1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
.business-mine{
	box-sizing: border-box;
	width: 100vw;
	.mine-hand{
		height: 320rpx;
		background: url("https://sbb-sbb.oss-cn-shenzhen.aliyuncs.com/Open_source_project/mine/mine_bg.png");
		background-size: 100%;
		.nav{
			width: 100vw;
			height: 88rpx;
			padding: 60rpx 3px;
			text-align: center;
			color: #fff;
			font-size: 15px;
			font-weight: 700;
			line-height: 60rpx;
		}
		.hand-info{
			display: flex;
			height: 160rpx;
			.hand-portrait{
				width: 140rpx;
				height: 140rpx;
				margin: 20rpx 30rpx; 
				padding: 4rpx;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 1);
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%
				}
			}
			.hand-name-set{
				.hand-nickname{
						width: 340rpx;
						font-size: 15px;
						line-height: 120rpx;
						color: #fff;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
				}
				.hand-setting{
					height: 40rpx;
					width: 170rpx;
					margin: -20rpx 0;
					border-radius: 20rpx;
					text-align: center;
					font-size: 14px;
					color: #fff;
					background-color: #528dbe;
				}
			}
			.top-icon{
				display: flex;
				position: relative;
				left: 70rpx;
				top: 20px;
				width: 110rpx;
				height: 40rpx;
			}
		}
	}
	
	.mine-body{
		.body-subkey{
			margin-top: 14px;
			background-color: #fff;
			.subkey-title{
				height: 100rpx;
				border-bottom: 1rpx solid rgba($color: #c8c8c8, $alpha: .5);
				text{
					line-height: 100rpx;
					font-size: 15px;
					font-weight: 700;
				}
				.title-icon{
					margin: -11rpx 15rpx 0 30rpx;
					vertical-align: middle;
				}
			}
			.subkey-menu{
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 100rpx;
					margin: 0 40rpx 0 30rpx;
					padding-left: 10rpx;
					border-top: 1rpx solid rgba($color: #c8c8c8, $alpha: .5);
					font-size: 14px;
				}
				.item:first-of-type{
					border-top: none;
				}
			}
			
		}
	}
	
	
	
}
</style>
    